<template>
  <div class="carModellStatisticsWrap">
    <car-brand-statistics @search="$emit('search')" class="carModellStatisticsItem" ref="carModelBrandComp">
    </car-brand-statistics>
    <car-shape-statistics @search="$emit('search')" class="carModellStatisticsItem" ref="carModelShapeComp">
    </car-shape-statistics>
  </div>
</template>
<script>
import CarBrandStatistics from './CarBrandStatistics.vue'
import CarShapeStatistics from './CarShapeStatistics.vue'
export default {
  components: {
    CarBrandStatistics,
    CarShapeStatistics
  },
  data () {
    return {}
  },
  mounted () {
    this.bindEvent()
  },
  methods: {
    bindEvent () {
      const vm = this
      window.addEventListener('resize', vm.resize)
    },
    resize () {
      const vm = this
      vm.$refs.carModelBrandComp.changeChart()
      vm.$refs.carModelShapeComp.changeChart()
    },
    refresh () {
      const vm = this
      vm.$refs.carModelBrandComp.getCartData()
      vm.$refs.carModelShapeComp.getCartData()
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  }
}
</script>
<style scoped lang="less">
.carModelStatisticsComp {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-color: green;
  >div {
    flex:1 0 0;
  }
  .carBrandStatisticsWrap {
    background: red;
  }
}
</style>
